<template>
  <div>
    <div class="card card--shadowless">
      <div class="card-body">
        <div class="d-flex">
          <div class="container flex-1">
            <div class="row">
              <div class="col-6">企业名称： {{ customerData.customer_name }}</div>
              <template v-if="isCompany">
                <div class="col-6">经营地址： {{ customerData.address || '' }}</div>
                <div class="col-6">组织类型： {{ customerData.org_class_name }}</div>
                <div class="col-6">统一社会信用代码：{{ customerData.register_no }}</div>
                <div class="col-6">负责人： {{ customerData.corp_name }}</div>
              </template>
              <div class="col-6">负责人身份证号： {{ customerData.id_card }}</div>
              <div class="col-6">联系电话： {{ customerData.mobile_no }}</div>
              <div class="col-6">家庭住址： {{ farmAddress }}</div>
              <div class="col-6">主营产业： {{ customerData.main_business }}</div>
              <div class="col-6">经营范围： {{ customerData.business_scope }}</div>
              <div class="col-6 d-flex">
                <div>物联增信：{{ hasDevice ? '有' : '无' }}</div>
                <i v-if="loading" class="el-icon-loading"></i>
                <el-button type="text" class="py-0" v-if="hasDevice" @click="handleViewDevice">
                  <i class="fa fa-search"></i>
                </el-button>
              </div>
            </div>
          </div>

          <div class="customer-status" :class="customerStatusStyle">
            {{ customerData.customerStatusLabel }}
          </div>
        </div>
      </div>
    </div>

    <customer-status-edit
      :customer-data="customerData"
      @success="handleEditSuccess"
    ></customer-status-edit>

    <customer-device-dialog
      :visible.sync="deviceVisible"
      :farm-id="farmId"
    ></customer-device-dialog>
  </div>
</template>

<script>
import {
  enumStatusStyle,
  checkDevices,
  personalOrgClass,
} from '@/credit/views/city/customer/blackList/mixins'

import CustomerStatusEdit from '@/credit/views/city/customer/blackList/CustomerStatusEdit'
import CustomerDeviceDialog from '@/credit/views/city/customer/blackList/CustomerDeviceDialog'

export default {
  components: {
    CustomerStatusEdit,
    CustomerDeviceDialog,
  },
  props: {
    customerData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      hasDevice: false,
      deviceVisible: false,
    }
  },
  computed: {
    isCompany() {
      return !personalOrgClass.includes(this.customerData.org_class)
    },
    farmId() {
      return this.customerData.customer_id
    },
    farmAddress() {
      const { customerData } = this
      return customerData.family_address || customerData.family_address_code_detail || ''
    },
    customerStatusStyle() {
      const {
        customerData: { customerStatus },
      } = this
      return enumStatusStyle[customerStatus]
    },
  },
  watch: {
    farmId: {
      handler: function (val) {
        if (val) {
          this.getData()
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      this.hasDevice = false
      this.loading = true
      checkDevices(this.farmId)
        .then(hasDevice => {
          this.hasDevice = hasDevice
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleViewDevice() {
      this.deviceVisible = true
    },
    handleEditSuccess(res) {
      this.$emit('success', res)
    },
  },
}
</script>

<style lang="scss" scoped>
$circle-size: 90px;
.customer-status {
  width: $circle-size;
  height: $circle-size;
  margin-left: 1rem;
  text-align: center;
  line-height: $circle-size;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  &.success {
    color: $success;
    border-color: $success;
  }
  &.danger {
    color: $error;
    border-color: $error;
  }
  &.warning {
    color: $warning;
    border-color: $warning;
  }
}
</style>
